<template>
	<view class="home">
		<!-- 导航栏 -->
		<scroll-view scroll-x   class="scrollNav">
			<view class="item" :class="navIndex == index ? 'active' : ''"  @click="clickNav(index,item.id)" v-for="(item,index) in navData" :key="item.id">{{item.classname}}</view>
		</scroll-view>	
		<!-- 新闻列表 -->
		<view class="content">
			<NewsItem :item="item" @click.native="goDetail(item)" v-for="(item,index) in newsData" :key="item.id"></NewsItem>
		</view>
		<!-- 没有数据显示的图片 -->
		<view class="noData" v-if="!newsData.length">
			<image src="../../static/images/nodata.png" mode=""></image>
		</view>
		<!-- 新闻加载 -->
		<view class="loading" v-if="newsData.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				navData:[],
				newsData:[],
				currentPage:1,
				currentId:50,
				loading:0 //0默认  1加载中  2没有更多了
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据
		onLoad(){
			this.getNavData();
			this.getNewsData()
		},
		// 页面滚动到底部的事件,常用于下拉下一页数据。
		onReachBottom(){
			if(this.loading == 2)
				return;
			this.currentPage++;
			this.loading = 1;
			this.getNewsData();
		},
		methods: {
			clickNav(index,id){
				this.loading = 0;
				this.navIndex = index;
				this.newsData = [];
				this.currentId = id;
				this.currentPage = 1;
				uni.pageScrollTo({scrollTop: 0});//让滑动条保持在最顶
				this.getNewsData(id);
			
			},
			goDetail(item){
				uni.navigateTo({
					url:`../detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航列表数据
			getNavData(){
				 uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success:res=>{
						this.navData = res.data;
					}
				})
			},
			// 获取新闻列表数据
			getNewsData(id){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{
						cid:this.currentId,
						// num:3,
						page:this.currentPage
					},
					success:res=>{
						if(res.data.length == 0){
							this.loading = 2;
						}
						this.newsData = [...this.newsData,...res.data];
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.scrollNav{
	height: 100rpx;
	background-color: #F7F8FA;
	white-space: nowrap;
	// 设置在h5里距离顶部的距离
	position: fixed;
	top:var(--window-top);
	left: 0;
	z-index:999;//这样导航栏就不会被挡住了
	
	// 隐藏scroll-view底下的滑动条
	/deep/::-webkit-scrollbar{
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	} 
	
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding: 0 30rpx;
		color:#333;
		
		&.active{
			color:#31C27C ;
		}
	}
	
}
.content{
	margin-top: 110rpx;
}

.noData{
	display: flex;
	justify-content: center;
	image{
		width: 360rpx;
	}
}

.loading{
	text-align: center;
	font-size: 26rpx;
	color:#888;
	line-height: 2em;
	
}
</style>
